<template>
  <!--设备档案-->
  <div style="width: 1450px">
    <el-card class="box-cardff">
      <div style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20px;
        ">
        <div>
          <el-button @click="add">新增</el-button>
          <el-button @click="Xiu">编辑</el-button>
          <el-button>删除</el-button>
          <!-- 触发按钮 -->
          <el-button @click="dialogVisible = true">查看设备二维码</el-button>
          <!-- 对话框 -->
          <el-dialog title="设备二维码" :visible.sync="dialogVisible" width="400px">
            <el-table :data="deviceInfo" stripe style="width: 100%">
              <el-table-column prop="label" label="" width="120"></el-table-column>
              <el-table-column prop="value" label=""></el-table-column>
            </el-table>
            <!-- 二维码展示 -->
            <div style="text-align: center; margin-top: 20px">
              <img :src="qrCodeUrl" alt="二维码" style="width: 100px; height: 100px" />
            </div>
            <!-- 操作按钮 -->
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">关闭</el-button>
              <el-button type="primary" @click="handlePrint">打印</el-button>
            </span>
          </el-dialog>
          <el-button style="margin-left: 15px">导入</el-button>
          <el-button style="margin-left: 15px">导出</el-button>
          <el-dropdown>
            <el-button style="margin-left: 15px">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>选项1</el-dropdown-item>
              <el-dropdown-item>选项2</el-dropdown-item>
              <el-dropdown-item>选项3</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div>
          <el-input placeholder="请输入设备编号或名称" clearable prefix-icon="el-icon-search" suffix-icon="el-icon-s-cale"
            style="width: 250px" />
          <el-popover placement="right" width="400" trigger="click">
            <svg-icon icon-class="caiss" style="width: 40px; height: 20px" class="pointer" slot="reference" />
          </el-popover>
        </div>
      </div>
      <div>
        <el-table :data="tableData" stripe style="width: 100%" size="mini" @selection-change="handleSelectionChange">
          <el-table-column fixed type="selection" width="55" style="text-align: center"
            align="center"></el-table-column>
          <el-table-column fixed type="index" label="序号" width="50" style="text-align: center"
            align="center"></el-table-column>
          <el-table-column fixed label="操作" width="100" style="text-align: center" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" style="text-align: center" @click="cha(scope.row)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="当前状态" style="text-align: center" width="120px" align="center">
            <template slot-scope="scope">
              <el-tag type="success" effect="dark" v-if="scope.row.currentStatus == 1">正常使用</el-tag>
              <el-tag type="warning" effect="dark" v-if="scope.row.currentStatus == 2">禁用</el-tag>
              <el-tag type="danger" effect="dark" v-if="scope.row.currentStatus == 3">报废</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="设备编号" style="text-align: center" width="180"
            align="center"></el-table-column>
          <el-table-column prop="name" label="设备名称" style="text-align: center" width="150px"
            align="center"></el-table-column>
          <el-table-column prop="specifications" label="规格型号" style="text-align: center" width="150px"
            align="center"></el-table-column>
          <el-table-column prop="deviceType" label="设备类型" style="text-align: center" width="150px"
            align="center"></el-table-column>
          <el-table-column prop="brand" label="品牌" style="text-align: center" width="150px"
            align="center"></el-table-column>
          <el-table-column prop="manufacture" label="制造国别" style="text-align: center" width="150px"
            align="center"></el-table-column>
          <el-table-column prop="manufacturer" label="生产厂家" style="text-align: center" width="200px"
            align="center"></el-table-column>
          <el-table-column prop="factoryNumber" label="出厂编号" style="text-align: center" width="150px"
            align="center"></el-table-column>
          <el-table-column prop="dateofManufacture" label="出厂日期" style="text-align: center" width="150px"
            align="center"></el-table-column>
          <el-table-column prop="totalPower" label="总功率(kw)" style="text-align: center" width="150px"
            align="center"></el-table-column>
          <el-table-column prop="weight" label="重量(吨)" style="text-align: center" width="130px"
            align="center"></el-table-column>
          <el-table-column prop="manufacturer" label="存放位置" style="text-align: center" width="190px"
            align="center"></el-table-column>
          <el-table-column label="当前状态" style="text-align: center" width="120px" align="center">
            <template slot-scope="scope">
              <el-tag type="success" effect="dark" v-if="scope.row.currentStatus == 1">正常使用</el-tag>
              <el-tag type="warning" effect="dark" v-if="scope.row.currentStatus == 2">禁用</el-tag>
              <el-tag type="danger" effect="dark" v-if="scope.row.currentStatus == 3">报废</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="manufacturer" label="使用部门" style="text-align: center" width="130px"
            align="center"></el-table-column>
          <el-table-column prop="manufacturer" label="设备负责人" style="text-align: center" width="130px"
            align="center"></el-table-column>
          <el-table-column prop="manufacturer" label="启用日期" style="text-align: center" width="130px"
            align="center"></el-table-column>
          <el-table-column prop="manufacturer" label="备注" style="text-align: center" align="center"
            width="130px"></el-table-column>
        </el-table>
      </div>
      <div style="text-align: right; margin: 20px">
        <el-pagination background :current-page.sync="currentPage" :page-size="pageSize" :total="total"
          layout="prev, pager, next, sizes, total" :page-sizes="[10, 20, 30, 50]" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>
<script>
import { listEquipment } from "@/api/eastjet-maintenance/sb/sb";
export default {
  name: "App",
  data() {
    return {
      //查看二维码
      dialogVisible: false,
      deviceInfo: [
        { label: "设备编号", value: "M123456" },
        { label: "设备名称", value: "数控车床" },
        { label: "规格型号", value: "CK6150" },
        { label: "设备类型", value: "车床设备" },
        { label: "存放位置", value: "车间B区" },
      ],
      qrCodeUrl: "https://via.placeholder.com/150", // 替换为真二维码
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 45,
      code: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      listEquipment("", this.currentPage, this.pageSize).then((res) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    cha(row) {
      this.$router.push({
        path: "/sb/dang/an/select"
        , query: { code: row.code }
      }
      );
    },
    handlePrint() {
      alert("打印功能");
    },
    handleSizeChange(size) {
      this.pageSize = size;
      listEquipment("", this.currentPage, this.pageSize).then((res) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      });
      console.log(`每页 ${size} 条`);
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      listEquipment("", this.currentPage, this.pageSize).then((res) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      });
      console.log(`当前页: ${page}`);
    },
    add() {
      this.$router.push({ path: "/sb/dang/an/xin" });
    },
    //修改
    Xiu() {
      if (this.code != null && this.code != "") {
        this.$router.push({
          path: "/sb/dang/an/xin"
          , query: { code: this.code, xiu: 2 }
        }
        );
      }
    },
    handleSelectionChange(val) {
      this.code = val[0].code;
    }
  },
};
</script>
<style scoped>
.dialog-footer {
  text-align: right;
}

.pointer:hover {
  cursor: pointer;
  /*光标呈现为指示链接的指针（一只手）*/
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-cardff {
  width: 1280px;
  /* height: 620px; */
  margin-left: 25px;
  margin-top: 20px;
}

.box-card2 {
  width: 480px;
  z-index: 1;
}
</style>
